<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sword Music</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        scrollbar-width: none;
      }
      ::-webkit-scrollbar{
        display: none;
      }
      ::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{
        width: 0;
      }
      li {
        position: relative;
        /* transition: .4s ease-in; */
        line-height: 2em;
        margin: 0 auto;
        max-width: 80vw;
        white-space: pre-wrap;
        }
        li:not(.active)::before{
          animation-play-state: paused;
        }
        li.active::before {
        content:attr(text);
        display: inline-block;
        position: absolute;
        top: 0;
        /* width: 100%; */
        /* height: 100%; */
        background: linear-gradient(to right, #047e43, #047e43) no-repeat 0 0;
        background-size: 0% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: gc linear var(--lrc-duration);
        animation-play-state: running;
      }
      @keyframes gc {
        0% {
          background-size: 0% 100%;
        }
        100% {
          background-size: 100% 100%;
        }
      }
        .font_setting{
            position: absolute;
            top: 4px;
            right: 10px;
        }
        .font_setting img{
            margin-right: 10px;
            cursor: pointer;
        }
      .mask {
        z-index: -1;
        background-image: url("./src/dyqll.jpg");
        background-size: cover;
        filter: blur(20px) grayscale(0.5);
        width: 100%;
        height: 98%;
        position: absolute;
      }
      h2,
      h1 {
        text-align: center;
      }
      #ul {
        margin-top: 20px;
        list-style-type: none;
        height: calc(100vh - 430px);
        width: 100%;
        overflow: auto;
        text-align: center;
        font-size: 20px;
        color: white;
        scroll-behavior: smooth;
      }
      #player {
        margin: 0 auto;
      }
      .active {
        /* color: #960d2d; */
        font-size: 1.4em;
      }
      .album {
        height: 200px;
        width: 200px;
        margin: 10px auto;
        border-radius: 50%;
        background-image: url("./src/dyqll.jpg");
        background-size: contain;
        position: relative;
        cursor: pointer;
      }
      .btns {
        width: 100%;
        text-align: center;
        white-space: nowrap;
      }
      .btns img {
        cursor: pointer;
      }
      img.pause,
      img.pause1 {
        margin: 0 30px;
      }
      img.pause {
        display: none;
      }
      .prev {
        transform: rotate(180deg);
      }
      .round_animate {
        animation: go_round 30s infinite;
      }
      .round_animate:hover {
        animation-play-state: paused;
      }
      div.pause {
        animation-play-state: paused;
      }
      @keyframes go_round {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <!-- 字体设置区域 -->
    <div class="font_setting">
        <img src="./src/font_plus.svg" onclick="fontChange('l')"/>
        <img src="./src/font_minus.svg" onclick="fontChange('s')"/>
    </div>
    <!-- 背景遮罩层 -->
    <div class="mask" id="mask"></div>
    <!-- 唱片 -->
    <div class="album" id="album" onclick="togglePlayerState()"></div>
    <!-- 操作按钮 -->
    <div class="btns">
      <img
        id="nextBtn"
        class="prev opt_btn"
        src="./src/next.svg"
        alt=""
        onclick="toggle('prev')"
      />
      <img
        class="pause opt_btn"
        src="./src/play.svg"
        alt=""
        onclick="player.pause()"
      />
      <img
        id="playBtn"
        class="pause1 opt_btn"
        src="./src/pause1.svg"
        alt=""
        onclick="player.play()"
      />
      <img
        id="nextBtn"
        class="opt_btn"
        src="./src/next.svg"
        alt=""
        onclick="toggle('next')"
      />
    </div>
    <!-- audio区域 -->
    <div style="display: flex; justify-content: center; margin-top: 10px">
      <audio
        src="./src/Plain Jane.mp3"
        id="player"
        autoplay
        controls
        onpause="playerPause()"
      ></audio>
    </div>
    <!-- 标题 -->
    <h1 id="title"></h1>
    <!-- 歌手 -->
    <h2 id="author"></h2>
    <!-- 歌词 -->
    <ul id="ul"></ul>
    <script>
      // 唱片图片
      let album = document.getElementById("album");
      // audio对象
      let player = document.getElementById("player");
      // 歌词区域
      let ul = document.getElementById("ul");
      // 背景
      let mask = document.getElementById("mask");
      // 标题
      let title = document.getElementById("title");
      // 歌手
      let author = document.getElementById("author");
      // 按钮
      let myImgs = document.querySelectorAll(".opt_btn");
      // 下一首图标
      let nextBtn=document.getElementById('nextBtn');
      // 当前音乐的索引
      let mIndex = 0;
      // 初始字体大小
      let initPx=20;
      // 滚动timer
      let scrollTimer=false;
      // 播放状态
      let playState=false;
      let lyrics = [
        {
          src: "./src/Plain Jane.mp3",
          l: `[ti:Plain Jane（Feat. Nicki Minaj） (Remix)]
[ar:A$AP Ferg/Nicki Minaj]
[al:Plain Jane (Remix)]
[by:]
[offset:0]
[00:00.00]Plain Jane（Feat. Nicki Minaj） (Remix) - A$AP Ferg/Nicki Minaj
[00:00.62]Lyrics by：Darold Brown/Kirlan Labarrie/Paul Beauregard/Jordan Houston/Onika Tanya Maraj
[00:01.35]Composed by：Darold Brown/Kirlan Labarrie/Paul Beauregard/Jordan Houston/Onika Tanya Maraj
[00:02.08]Produced by：Kirk Knight
[00:02.22]Nicki Minaj/A$AP Ferg：
[00:02.28]Young Money
[00:08.13]Ayo Ferg
[00:09.09]Yeah
[00:09.48]A$AP Ferg：
[00:11.56]Ride with the mob Alhamdulillah
[00:14.10]Check in with me and do your job
[00:16.96]Ferg is the name Ben Baller did the chain
[00:19.79]Tourneau for the watch presi Plain Jane
[00:22.59]Yamborghini chain rest in peace to my superior
[00:25.34]Hermès link could feed a village in Liberia
[00:28.23]TMZ taking pictures causin' mad hysteria
[00:31.06]Momma see me on BET and started tearin' up
[00:34.00]I'ma start killin' n***as how you get that trife
[00:36.38]I attended Harlem picnics where you risked your life
[00:39.16]Uncle used to skim work sellin' nicks at night
[00:41.97]I was only 8 years old watching Nick at Nite
[00:44.78]Uncle Psycho was in that bathroom buggin'
[00:48.07]Knife to his gut hope Daddy don't cut him
[00:50.84]Suicidal thoughts brought to me with no advisory
[00:53.58]He was pitchin' dummy sellin' fiends mad ivory
[00:56.47]Grandma had the arthritis in her hands bad
[00:59.26]She was poppin' pills like rappers in society
[01:02.13]I'll f**k yo' b***h for the irony
[01:04.70]I'll send Meechy at yo' ho if yo' b***h keep eyein' me
[01:07.78]Ride with the mob Alhamdulillah
[01:10.53]Check in with me and do your job
[01:13.41]Ferg is the name Ben Baller did the chain
[01:16.24]Tourneau for the watch presi Plain Jane
[01:19.02]Ride with the mob Alhamdulillah
[01:21.88]Check in with me and do your job
[01:24.74]Ferg is the name Ben Baller did the chain
[01:27.57]Tourneau for the watch presi Plain Jane
[01:31.81]Suck a n***a d**k or somethin'
[01:33.15]Yeah
[01:34.56]Suck a n***a d**k or somethin'
[01:35.75]You already know Harlem
[01:37.39]Suck a n***a d**k or somethin'
[01:38.62]Queens
[01:40.23]Suck a n***a d**k or somethin'
[01:41.17]Queens for the Kings of the Queens
[01:41.40]Nicki Minaj：
[01:41.63]Ayo I'ma explain why you prolly never see me
[01:44.45]I push a Lamborghini chocha magic like Houdini
[01:47.11]My body shaped like Jeannie booty dreamy waist is teeny
[01:49.73]Yes I told him to get TIDAL so he stream me when he leave me
[01:52.58]I go hard in the booth Biggie vibes gimme the loot
[01:55.39]I'm a classy millionaire b***hes ain't got the couth
[01:58.56]C-O-U-T-H 'cause you can't spell it either
[02:01.10]If I call him then he comin' home runnin' Derek Jeter
[02:03.87]B***hes must be eatin' a*s because I swear they're bottom feeders
[02:06.73]Ho you know that you my son I shoulda scrapped you as a fetus
[02:09.57]All these b***hes rockin' inches 'cause they followin' the leader
[02:12.43]I should switch it up on h*es and rock a Afro like Lupita's
[02:15.24]I don't keep up with the Joneses but I do know Catherine Zeta
[02:18.02]I'm with Candice TT Thembi and Paola mi amiga
[02:21.20]Rap b***hes they gotta check in with the Queen
[02:23.64]I'm the Alpha the Omega everything in between uh
[02:26.84]Ride with Minaj mmh Mashallah
[02:29.60]Check in with me then do your job
[02:32.51]Queen is the name Rafaello did the chain
[02:35.31]This is Monse Patty Plain Jane
[02:38.15]Ride with Minaj mmh Mashallah
[02:40.89]Check in with me then do your job
[02:43.79]Queen is the name Rafaello did the chain
[02:46.61]This is Monse Patty Plain Jane
[02:50.84]Eat a Barbie a*s or somethin'
[02:53.66]Eat a Barbie a*s or somethin'
[02:56.50]Eat a Barbie a*s or somethin'
[02:59.27]Eat a Barbie a*s or somethin'
[03:00.55]Nicki Minaj/A$AP Ferg/Kirk Knight：
[03:01.94]Brrt
[03:02.09]Kirk Kneezy on the beat
[03:03.43]Yo you know this here for the city n***a
[03:06.68]Gold chains Plain Janes and all that good stuff n***a`,
          bg: "./src/Plain Jane.webp",
        },
        {
          src: "./src/Blueberry Faygo (Explicit).mp3",
          l: `[ar:Lil Mosey]
[ti:Blueberry Faygo]
[length:02:42.59]
[re:www.megalobiz.com/lrc/maker]
[ve:v1.2.3]
[00:17.19]Damn, Callan (Damn, Callan)
[00:19.16]One bad bitch and she do what I say so (Yeah)
[00:21.41]Two big 40's and a big ass Draco (Boom, boom)
[00:23.68]Three more millions when you ask how my day go (Yeah)
[00:26.42]Poured up a four, now that's blueberry Faygo (Lean)
[00:28.66]One false move and we straight to shootin' shit
[00:31.15]Two small bands just to take you out real quick (Bands)
[00:33.70]Three more hoes, pull up, I'm fucking shit (Yeah)
[00:36.18]That's how it go, big bands, I'm thumbin' shit
[00:38.41]Ayy, one bad bitch and she do what I say so (Yeah)
[00:40.66]Two big 40's and a big ass Draco (Boom, boom)
[00:43.16]Three more millions when you ask how my day go (Yeah)
[00:45.92]Poured up a four, now that's blueberry Faygo (Lean)
[00:48.41]One false move and we straight to shootin' shit
[00:50.64]Two small bands just to take you out real quick (Bands)
[00:52.92]Three more hoes, pull up, I'm fucking shit (Yeah)
[00:55.41]That's how it go, big bands, I'm thumbin' shit
[00:58.42]I'm with my niggas, yeah, we some rockstars
[01:00.42]And I'm with my nigga, yeah, KK Wokhardt (KK Wokhardt)
[01:02.45]This not my dick, lil' bitch, my Glock hard (Lil' bitch)
[01:04.66]Straight to the cash (Cash), I'm a trapstar
[01:07.66]Straight to the bag (Bag), I'm that nigga, huh?
[01:09.92]Got me some gas, rollin' up some
[01:12.17]Pfft, pfft, cash, yeah, I got me some
[01:14.90]I ain't fucked since yesterday, I'ma fuck somethin'
[01:17.42]One bad bitch and she do what I say so (Yeah)
[01:19.67]Two big 40's and a big ass Draco (Boom, boom)
[01:21.93]Three more millions when you ask how my day go (Yeah)
[01:24.66]Poured up a four, now that's blueberry Faygo (Lean)
[01:26.68]One false move and we straight to shootin' shit
[01:29.18]Two small bands just to take you out real quick (Bands)
[01:31.66]Three more hoes, pull up, I'm fucking shit (Yeah)
[01:33.93]That's how it go, big bands, I'm thumbin' shit
[01:36.69]Three-oh clip in my nina (Boom, boom)
[01:39.16]On my toes, Gucci, Valentino
[01:41.44]She on go, your bitch for the team, uh (Lil' bitch)
[01:43.91]'Cause you know your bitch want a winner (Winner)
[01:46.19]I just went back to my city (To my city)
[01:49.16]And you know they all fuckin' with me (Yeah, they is)
[01:51.90]But it ain't safe, poles with me (Poles)
[01:54.43]I'ma chase bands 'til they end me
[01:56.17]One bad bitch and she do what I say so (Yeah)
[01:58.41]Two big 40's and a big ass Draco (Boom, boom)
[02:00.66]Three more millions when you ask how my day go (Yeah)
[02:03.42]Poured up a four, now that's blueberry Faygo (Lean)
[02:05.68]One false move and we straight to shootin' shit
[02:07.91]Two small bands just to take you out real quick (Bands)
[02:10.44]Three more hoes, pull up, I'm fucking shit (Yeah)
[02:12.89]That's how it go, big bands, I'm thumbin' shit
[02:15.17]Ayy, one bad bitch and she do what I say so (Yeah)
[02:17.66]Two big 40's and a big ass Draco (Boom, boom)
[02:20.16]Three more millions when you ask how my day go (Yeah)
[02:22.91]Poured up a four, now that's blueberry Faygo (Lean)
[02:24.93]One false move and we straight to shootin' shit
[02:27.67]Two small bands just to take you out real quick (Bands)
[02:29.93]Three more hoes, pull up, I'm fucking shit (Yeah)
[02:32.41]That's how it go, big bands, I'm thumbin' shit`,
          bg: "./src/Blueberry Faygo (Explicit).jpg",
        },
        {
          src: "./src/一曲相思.mp3",
          l: `[ti:一曲相思]
[ar:半阳]
[al:]
[by:cn1056]
[00:00.00]歌曲：一曲相思
[00:03.00]演唱：半阳
[00:06.00]作词：可泽
[00:09.00]作曲：可泽
[00:12.00]半阳 - 一曲相思
[00:18.30]3
[00:19.30]2
[00:20.30]1
[00:21.30]这人间袅袅炊烟
[00:23.93]和风花雪月浪漫
[00:26.13]痴情人多半贪恋
[00:28.43]爱恨情仇的好看
[00:30.89]又让你痛不欲生
[00:33.18]又让你趁醉装疯
[00:35.47]终有天脱胎换骨
[00:37.73]直到哭着笑才懂
[00:39.30]欲问青天
[00:40.99]这人生有几何
[00:43.40]怕这去日苦多
[00:45.72]往事讨一杯相思喝
[00:47.93]倘若这回
[00:50.18]还像曾经执着
[00:52.56]心执念你一个
[00:54.86]那我可能是多情了
[00:57.22]浊酒一杯
[00:59.58]余生不悲不喜
[01:01.77]何惧爱恨别离
[01:04.23]一路纵马去斟酌
[01:06.42]一曲相思
[01:08.65]入江水与山河
[01:11.06]在油伞下走过
[01:13.24]悠然入梦却恍若昨
[01:16.00]
[01:17.00]半阳 - 一曲相思
[01:35.30]2
[01:36.30]1
[01:37.30]这人间袅袅炊烟
[01:39.92]和风花雪月浪漫
[01:42.39]痴情人多半贪恋
[01:44.78]爱恨情仇的好看
[01:46.89]又让你痛不欲生
[01:49.21]又让你趁醉装疯
[01:51.58]终有天脱胎换骨
[01:53.79]直到哭着笑才懂
[01:55.59]欲问青天
[01:57.14]这人生有几何
[01:59.53]怕这去日苦多
[02:01.73]往事讨一杯相思喝
[02:04.09]倘若这回
[02:06.41]还像曾经执着
[02:08.81]心执念你一个
[02:11.01]那我可能是多情了
[02:13.29]浊酒一杯
[02:15.65]余生不悲不喜
[02:17.87]何惧爱恨别离
[02:20.09]一路纵马去斟酌
[02:22.53]一曲相思
[02:24.61]入江水与山河
[02:27.04]在油伞下走过
[02:29.45]悠然入梦却恍若昨
[02:31.80]
[02:32.80]半阳 - 一曲相思
[02:45.80]`,
          bg: "./src/yqxs.jpg",
        },
        {
          src: "./src/灰色轨迹.mp3",
          l: `[ti:灰色轨迹 (《天若有情之追梦人》电影插曲)]
[ar:BEYOND]
[al:Control]
[by:]
[offset:0]
[00:00.00]灰色轨迹 - BEYOND
[00:05.46]词：刘卓辉
[00:10.92]曲：黄家驹
[00:16.38]酒一再沉溺 何时麻醉我抑郁
[00:21.81]
[00:23.34]过去了的一切会平息
[00:27.45]
[00:29.38]冲不破墙壁 前路没法看得清
[00:35.38]
[00:36.51]再有那些挣扎与被迫
[00:40.95]
[00:43.25]踏着灰色的轨迹
[00:47.65]
[00:50.35]尽是深渊的水影
[00:54.73]
[00:56.61]我已背上一身苦困后悔与唏嘘
[01:02.32]
[01:03.47]你眼里却此刻充满泪
[01:07.42]
[01:09.96]这个世界已不知不觉的空虚
[01:15.29]
[01:15.84]Woo 不想你别去
[01:21.32]
[01:23.02]心一再回忆 谁能为我去掩饰
[01:29.06]
[01:30.14]到哪里都跟你要认识
[01:35.08]
[01:36.31]洗不去痕迹 何妨面对要可惜
[01:42.19]
[01:43.40]各有各的方向与目的
[01:47.79]
[01:50.40]踏着灰色的轨迹
[01:54.61]
[01:57.31]尽是深渊的水影
[02:02.10]
[02:03.54]我已背上一身苦困后悔与唏嘘
[02:09.33]
[02:10.15]你眼里却此刻充满泪
[02:14.79]
[02:16.71]这个世界已不知不觉的空虚
[02:22.13]
[02:22.78]Woo 不想你别去
[02:27.95]
[02:57.18]踏着灰色的轨迹
[03:01.16]
[03:03.45]尽是深渊的水影
[03:08.26]
[03:10.16]我已背上一身苦困后悔与唏嘘
[03:15.75]
[03:16.71]你眼里却此刻充满泪
[03:21.41]
[03:23.15]这个世界已不知不觉的空虚
[03:28.90]
[03:29.46]Woo 不想你别去
[03:34.47]
[03:36.90]我已背上一身苦困后悔与唏嘘
[03:42.32]
[03:43.38]你眼里却此刻充满泪
[03:48.00]
[03:50.12]这个世界已不知不觉的空虚
[03:55.97]Woo 不想你别去`,
          bg: "./src/T002R300x300M000004EOVA73heGrc_1.webp",
        }

      ];
      var oLRC = {
        ti: "", //歌曲名
        ar: "", //演唱者
        al: "", //专辑名
        by: "", //歌词制作人
        offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
        ms: [], //歌词数组{t:时间,c:歌词}
      };
      player.addEventListener('play',()=>{
        if(!playState)playState=true;
      })
      player.addEventListener('pause',()=>{
        if(playState)playState=false;
      })
      // 滚轮滚动10s后在重置滚动状态
      ul.onwheel =()=>{
        if(scrollTimer)clearTimeout(scrollTimer);
        scrollTimer=false;
        scrollTimer=setTimeout(()=>{
          clearTimeout(scrollTimer);
          scrollTimer=false;
        },10000)
      }
      //修改字体大小
      function fontChange(type){
          if(type=='s'){
                  initPx--;
          }else{
                    initPx++;
                  ul.style.fontSize='21px'
                }
          ul.style.fontSize=`${initPx}px`;
      };
      
      /***
       * 生成歌词对象
      */
      function createLrcObj(lrc) {
        if (lrc.length == 0) return;
        var lrcs = lrc.split("\n"); //用回车拆分成数组
        for (var i in lrcs) {
          //遍历歌词数组
          lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
          var t = lrcs[i].substring(
            lrcs[i].indexOf("[") + 1,
            lrcs[i].indexOf("]")
          ); //取[]间的内容
          var s = t.split(":"); //分离:前后文字
          if (isNaN(parseInt(s[0]))) {
            //不是数值
            for (var i in oLRC) {
              if (i != "ms" && i == s[0].toLowerCase()) {
                oLRC[i] = s[1];
              }
            }
          } else {
            //是数值
            var arr = lrcs[i].match(/\[(\d+:.+?)\]/g); //提取时间字段，可能有多个
            var start = 0;
            for (var k in arr) {
              start += arr[k].length; //计算歌词位置
            }
            var content = lrcs[i].substring(start); //获取歌词内容
            for (var k in arr) {
              var t = arr[k].substring(1, arr[k].length - 1); //取[]间的内容
              var s = t.split(":"); //分离:前后文字
              oLRC.ms.push({
                //对象{t:时间,c:歌词}加入ms数组
                t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
                c: content,
              });
            }
          }
        }
        oLRC.ms.sort(function (a, b) {
          //按时间顺序排序
          return a.t - b.t;
        });
      }
      
      //切歌
      const toggle = (type) => {
        oLRC = {
          ti: "", //歌曲名
          ar: "", //演唱者
          al: "", //专辑名
          by: "", //歌词制作人
          offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
          ms: [], //歌词数组{t:时间,c:歌词}
        };
        ul.scrollTop=0;
        if (type == "prev") {
          if (mIndex == 0) {
            mIndex = lyrics.length - 1;
          } else {
            mIndex--;
          }
        } else {
          if (mIndex == lyrics.length - 1) {
            mIndex = 0;
          } else {
            mIndex++;
          }
        }
        playerPause();
        initMusic();
        player.play();
      };
      //切换歌曲播放
      const togglePlayerState=()=>{
        if(playState){
          player.pause();
        }else{
          player.play();
        }
      }

      //歌曲初始化
      function initMusic() {
        album.style.backgroundImage = `url("${lyrics[mIndex].bg}")`;
        mask.style.backgroundImage = `url("${lyrics[mIndex].bg}")`;
        player.src = lyrics[mIndex].src;
        ul.scrollTop=0;
        createLrcObj(lyrics[mIndex].l);
        let lrcArr = oLRC.ms;
        title.innerHTML = oLRC.ti;
        author.innerHTML = oLRC.ar;
        let lis = "";
        lrcArr.forEach((lrc) => {
          lis += `<li class="lis" text="${lrc.c}">${lrc.c}</li>`;
        });
        ul.innerHTML = lis;
        let lisArr = document.getElementsByClassName("lis");
        /**
         *监听播放器的播放事件 
         */
        player.addEventListener("play", (e) => {
          album.className = "album round_animate";
          myImgs[1].style.display = "inline-block";
          myImgs[2].style.display = "none";
        });
         /**
         *播放器进度变化事件回调
         */
        player.ontimeupdate = (e) => {
          //获取当前时间
          let { currentTime } = e.target;
          // console.log(currentTime);
          let node = document.getElementsByClassName("active") || [];
          let max=lrcArr.length-1;
          //计算歌词滚动距离
          if(currentTime>=lrcArr[max].t){
              if (node.length) {
                node[0].className = "lis";
              }
              lisArr[max].className = "lis active";
              if (max >= 5 && !scrollTimer) {
                ul.scrollTop = lisArr[max-5].offsetTop;
              }
              return;
          }
          for (let index = 0; index < lisArr.length; index++) {
            console.log(lrcArr[index].t);
            let d;
            d=index==0?lrcArr[index].t:lrcArr[index].t-lrcArr[index-1].t;
            document.body.style.setProperty('--lrc-duration',`${d*1000}ms`)
            if (currentTime < lrcArr[index].t) {
              if (node.length)node[0].className = "lis";
              if(lisArr[index-1])lisArr[index-1].className = "lis active";
              if (index >= 5 && !scrollTimer) {
                let {top}=ul.getBoundingClientRect()
                ul.scrollTop = lisArr[index-5].offsetTop-top;
              }
              break;
            }
          }
        };
      }
      //初始化播放
      initMusic();
      //播放暂停回调
      const playerPause = () => {
        album.className = "album round_animate pause";
        myImgs[2].style.display = "inline-block";
        myImgs[1].style.display = "none";

        //播放结束后自动切换下一首
        if(player.ended){
          nextBtn.click();
        }
      };
    </script>
  </body>
</html>
